﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../../js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="adver">
    <div class="adver-img">
        <img src="images/adver06.jpg">
        <img src="images/adver01.jpg">
        <img src="images/adver02.jpg">
        <img src="images/adver03.jpg">
        <img src="images/adver04.jpg">
        <img src="images/adver05.jpg">
        <img src="images/adver06.jpg">
        <img src="images/adver01.jpg">
    </div>
    <ul>
        <li style="display: none">1</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li style="display: none">1</li>
    </ul>
    <div class="arrowLeft"><</div>
    <div class="arrowRight">></div>
</div>
<script type="text/javascript">
    let i = 1;
    $(function () {
        //下一张
        $(".arrowRight").click(function () {
           //判断当前动画是否完成

            if($(".adver-img img:eq("+(i)+")").position().left == 0){
                //初始化
                $(".adver-img img:eq("+i+")").siblings().css("left","700px");
                //700~0
                $(".adver-img img:eq("+(i+1)+")")
                    .animate({left:0},500);
                //0~-700
                $(".adver-img img:eq("+(i)+")")
                    .css("left","0")
                    .animate({left:-700},500);
                i++;
                console.log(i)
                if(i>6){
                    i = 1;
                }
                $("ul li:eq("+i+")").css("background","orange").siblings().css("background","#333");
            }
        })

        //上一张
        $(".arrowLeft").click(function () {
            $(".adver-img img:eq("+i+")").siblings().css("left","-700px");
            //-700~0
            $(".adver-img img:eq("+(i-1)+")")
                .animate({left:0},500);
            //0~700
            $(".adver-img img:eq("+i+")")
                .css("left","0")
                .animate({left:700},500);
             i--;
            if(i<1){
                i=6;
            }
            $("ul li:eq("+i+")").css("background","orange").siblings().css("background","#333");

        })
    })
</script>
</body>
</html>